<template>
  <demoBlock title="自定义预览样式" padding class="demo-uploader">
    <vcu-uploader v-model="fileList">
      <template #preview-cover="{ file }">
        <div class="preview-cover vcu-ellipsis">{{ file.name }}</div>
      </template>
    </vcu-uploader>
  </demoBlock>
</template>

<script>
import { defineComponent, ref, getCurrentInstance } from "vue";

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const fileList = ref([
      { url: `${proxy.serverIp}/images/car.jpg`, deletable: false, file: { name: "图片1" } },
      { url: `${proxy.serverIp}/images/j20.jpg`, deletable: true, file: { name: "图片2" } },
    ]);

    return {
      fileList,
    };
  },
});
</script>
<style lang="less" scoped>
.demo-uploader {
  .preview-cover {
    position: absolute;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
}
</style>
